<template>
  <div class="rinkCard">
    <img :src="rinkData.coverImgUrl" alt="logo" v-if="rinkData" />
    <ul class="list">
      <li class="item" v-for="(item, index) in playList" :key="item.id" @click="handleToPlayMusic(item.id)">
        <span :style="index < 3 ? {color: 'red'} : ''">{{index + 1}}</span>
        <span><a href="javascript:;">{{item.name}}</a></span>
        <div class="right" v-for="ar in item.ar" :key="ar.id">
          <span class="author">{{ar.name}}</span>
        </div>
      </li>
    </ul>
    <div class="more">
      <a href="javascript:;">查看全部 &gt;</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RinkCard',
  props: ['rinkData'],
  data () {
    return {
      playList: []
    }
  },
  methods: {
    async getPlayList (id) {
      const res = await this.$http.get(`/playlist/detail?id=${id}`)
      // 截取五个数据到放入页面中
      // console.log(res.data.playlist.tracks.slice(0, 5))
      this.playList = res.data.playlist.tracks.slice(0, 5)
    },
    handleToPlayMusic (id) {
      this.$router.push(`/music/${id}`)
    }
  },
  created () {
    this.getPlayList(this.rinkData.id)
  }
}
</script>

<style lang="less" scoped>
.rinkCard {
  overflow: hidden;
  // background-color: aqua;
  margin: 20px 0;
  img {
    display: block;
    width: 20%;
    float: left;
    border-radius: 20px;
    // background-color: black;
  }
  .list {
    width: 80%;
    float: left;
    padding-left: 30px;
    box-sizing: border-box;
    .item {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      // background-color: blue;
      span:not(.right span) {
        font-size: 18px;
        margin: 0 10px;
        color: #373737;
      }
      span{
        a{
          color: #373737;
        }
        a:hover{
          text-decoration: underline;
        }
      }
      .right {
        float: right;
        .author{
          margin: 0 5px;
        }
      }
      &:nth-child(odd){
        background-color: rgba(0, 0, 0, 0.05);
      }
    }
  }
  .more {
    overflow: hidden;
    margin-left: 20%;
    width: 100px;
    height: 30px;
    line-height: 30px;
    padding: 0 50px;
    a {
      display: block;
      color: #373737;
    }
  }
}
</style>
